<template>
<div>
    <div class="com-cnt">
        <!--会员卡办理-->
        <ul class="box">
            <li class="vip" v-for="(item,listindex) in conlist" :class="{cur:tabIndex == listindex}" @click="tabNameClick(listindex)" >
                <img :src="item.picture" alt="会员卡图片">
            </li>
            
        </ul>
    </div>
    <!--立即办理-->
    <div style="position:relative">
        <button @click="todetails" class="btn" style="position:fixed;bottom:0.98rem;width:100%;height:.8rem;border:none;outline:none;background: #aad114;font-size: .24rem;color:#fff;">立即办理</button>
    </div>
</div>
</template>

<script>
    import { domain } from '@/assets/js/config'
    import http from "@/assets/js/axios"
    import $ from 'jquery'
    import { maskTips } from '@/assets/js/dom'
    export default {
        name: 'memberslistPage',
        components:{
        },
        data(){
            return{
                conlist: [],
                tabIndex: 0,
                typeIndex: 0
            }
        },
        mounted ( ) {
            var that = this
            var userToken = localStorage.getItem("token")||'' //用户token值
            //拿到卡信息
            getcardinfo(userToken)

            function getcardinfo(userToken){
                $.ajax({
                    url : domain + "/xshk/f/user/getCardLists?token=" + userToken,
                    type:"get",
                    dataType : "json",
                    headers: {
                        'Content-Type':'application/x-www-form-urlencoded'
                    },
                    success : function(data) {
                        console.log(data)
                      if(data.code === 0){
                            that.conlist = data.data
                            
                      }else{
                            console.log(data.message);
                            that.$router.push('/login')
                      }
                    },
                    error : function(){
                        console.log("通信失败");
                    }
                    
                })
            }

        },
        methods : {
            tabNameClick: function(listindex){
                this.tabIndex = listindex;
                this.typeIndex = listindex
            },
            todetails:function(){
                this.$router.push({
                    path: '/membersdetails',
                    name: 'membersdetailsPage',
                    params: { 
                        type: this.conlist[this.typeIndex].type
                    }
                })
            }
        }
    }
</script>

<style lang="stylus" scoped>
.com-cnt
    width 100%
    height 100%
    
    .header{
    height: .92rem;
    text-align: center;
    background:#f9f9f9;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}
.left{
    font-size:.28rem;
    position: absolute;
    left:.34rem;
    top:.36rem;
}
.title{
    font-size:.32rem;
    color:#333;
    line-height: .92rem;
}
/*会员卡办理*/
.box{
    padding:.32rem .4rem;
    box-sizing: border-box;
    margin-top: .52rem;
}
.box .vip{
    width:100%;
    height:auto;
    background: #e4e4e4;
    text-align: center;
    color:#1e1e1e;
    font-size: .24rem;
    /*border:1px solid #ff6633;*/
    border-radius: 20px;
    margin-bottom: .52rem;
    
}
.box .cur{
    border:3px solid #ff6633;
}
.box .vip img{
    width 100%
    height 100%
    display block
    

}
.box .vip span{
    margin: 1.8rem auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


</style>